<template>
  <div class="" style="padding: 20px;">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧用户信息 -->
      <div class="user-sidebar">
        <div class="user-header">
          <div class="avatar-container">
            <img alt="用户头像" class="user-avatar" :src="userInfo.avatar" v-if="userInfo.avatar"/>
             <img alt="用户头像" class="user-avatar" v-else src="@/assets/img/nt.png"/>
          </div>
          <div class="greeting">
            <h2>下午好，{{ userInfo.nickName||'' }}！</h2>
            <div class="action-buttons">
              <button class="btn primary-btn" @click="navTo">进入我的
                <el-icon>
                  <ArrowRight/>
                </el-icon>
              </button>
              <button class="btn secondary-btn">数字画像
                <el-icon>
                  <ArrowRight/>
                </el-icon>
              </button>
            </div>
          </div>
        </div>

        <div class="user-info-list">
          <div class="info-row">
            <div class="info-item">
              <span class="label">联系方式：</span>
              <span class="value">{{ userInfo.phonenumber }}</span>
            </div>
            <div class="info-item">
              <span class="label">身份证号：</span>
              <span class="value">{{ userInfo.idcard }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">邮箱：</span>
              <span class="value">{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <span class="label">现单位：</span>
              <span class="value">{{ userInfo.presentUnit }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">编制所在单位：</span>
              <span class="value">{{ userInfo.bzUnit }}</span>
            </div>
            <div class="info-item">
              <span class="label">教职工类型：</span>
              <span class="value">{{ getTextByCode('positionType', userInfo.positionType, '') }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">心理健康兼职老师：</span>
              <span class="value">{{ userInfo.isPsychologist?.isMentalHealth=== 1 ?'是 ' :'否  ' }}</span>
            </div>
            <div class="info-item">
              <span class="label">骨干教师：</span>
              <span class="value">{{ userInfo.teacher?.isBackbone=== 1 ?'是 ' :'否  ' }}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">任教学段：</span>
              <span class="value">{{ getTextByCode('teachingStage', userInfo.teachingStage, '') }}</span>
            </div>
            <div class="info-item">
              <span class="label">担任思政教师：</span>
              <span class="value">{{ userInfo.isPolitics?.isPolitics=== 1 ?'是 ' :'否  '}}</span>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">任教学科：</span>
              <span class="value">{{ getTextByCode('position', userInfo.position, '') }}</span>
            </div>
          </div>
        </div>

        <div class="role-buttons">
          <el-tag class="role-btn" v-for="i in userIdentityList" size="large" type="primary">{{i.roleName}}</el-tag>

        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-area">
        <div class="todo-section">
          <h3 class="section-title">我的待办</h3>
          <div class="task-grid">
            <!-- 待办任务卡片 -->
            <div class="task-card">
              <div class="task-image">
                <img alt="任务图片" src="https://api.vvhan.com/api/wallpaper/views"/>
              </div>
              <div class="task-content">
                <h4 class="task-title">【待办任务】基础数据确认</h4>
                <p class="task-desc">任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述...</p>
              </div>
              <el-button class="task-btn " round type="primary">前往任务</el-button>
            </div>

            <!-- 待办任务卡片 -->
            <div class="task-card">
              <div class="task-image">
                <img alt="任务图片" src="https://api.vvhan.com/api/wallpaper/views"/>
              </div>
              <div class="task-content">
                <h4 class="task-title">【待办任务】基础数据确认</h4>
                <p class="task-desc">任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述...</p>
              </div>
              <el-button class="task-btn " round type="primary">前往任务</el-button>
            </div>

            <!-- OA审批卡片 -->
            <div class="task-card approval-card">
              <div class="task-content full-width">
                <h4 class="task-title">【OA审批】应用上架申请</h4>
                <p class="task-desc">任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述...</p>
                <div class="approval-info">
                  <div class="info-group">
                    <div class="info-item">应用名称：<span>综合素质评价</span></div>
                    <div class="info-item">组织名称：<span>杭州领航启学科技有限公司</span></div>
                    <div class="info-item">申请人：<span>张三杉</span></div>
                    <div class="info-item">上架终端：<span>PC端，移动端</span></div>
                  </div>
                </div>
              </div>
              <el-button class="task-btn " round type="primary">前往审批</el-button>
            </div>

            <!-- OA审批卡片 -->
            <div class="task-card approval-card">
              <div class="task-content full-width">
                <h4 class="task-title">【OA审批】应用上架申请</h4>
                <p class="task-desc">任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述...</p>
                <div class="approval-info">
                  <div class="info-group">
                    <div class="info-item">应用名称：<span>综合素质评价</span></div>
                    <div class="info-item">组织名称：<span>杭州领航启学科技有限公司</span></div>
                    <div class="info-item">申请人：<span>张三杉</span></div>
                    <div class="info-item">上架终端：<span>PC端，移动端</span></div>
                  </div>
                </div>
              </div>
              <el-button class="task-btn " round type="primary">前往审批</el-button>

            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
    <!-- 常用应用 -->
    <div class="common-apps ">
      <h3>常用应用</h3>
      <div class="apps-grid">
        <div   class="app-item">
          <img src="@/assets/img/cy1.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy2.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy4.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy5.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy3.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy6.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy7.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy1.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy2.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy4.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy5.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy3.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy6.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
        <div class="app-item">
          <img src="@/assets/img/cy7.png" alt="" class="app-icon">
          <div class="app-name">常用应用</div>
        </div>
      </div>
    </div>
    <!-- 常用应用 -->
    <div style="display: grid;grid-template-columns:repeat(2, 1fr); gap: 20px;">
      <div class="common-apps ">
        <h3>市本级应用</h3>
        <div class="apps-grid">
          <div class="app-item" @click="navbar">
            <img src="@/assets/img/cy10.png" alt="" class="app-icon">
            <div class="app-name">基础数据管理</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item" @click="navbar">
            <img src="@/assets/img/cy1.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>

        </div>

      </div>
      <div class="common-apps ">
        <h3>上级应用</h3>
        <div class="apps-grid">
          <div class="app-item">
            <img src="@/assets/img/cy1.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy5.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy3.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy1.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 常用应用 -->
    <div style="display: grid;grid-template-columns:repeat(1, 1fr); gap: 20px;">
      <div class="common-apps ">
        <h3>全部应用 （ 36个 ）</h3>
        <div class="apps-grid">
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy5.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>

          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy5.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy5.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy5.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy2.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
        </div>
        <div class="apps-grid" style="margin-top: 20px">
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy9.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy9.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy9.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy4.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy9.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
          <div class="app-item">
            <img src="@/assets/img/cy8.png" alt="" class="app-icon">
            <div class="app-name">常用应用</div>
            <h6>省级应用</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { post,get } from '@/api/request'  // 导入get方法，替换getUserInfo
import {getTextByCode, getCodeByText, getDictOptions, getDictOptionsNumber} from '@/utils/dictionaryUtil';
// 获取路由实例
const router = useRouter()
const navbar = () => {
  router.push('/dashboard')
}
// 用户信息，初始为空对象，后续从API获取
const userInfo = ref({
  name: '',
  phonenumber: '',
  idcard: '',
  email: '',
  currentSchool: '',
  district: '',
  teacherType: '',
  isPsychologist: '',
  isBackbone: '',
  grade: '',
  isPolitics: '',
  subject: ''
})
const userIdentityList = ref([])

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 直接使用get方法请求用户信息API
    const data = await get('/api/admin/getUserInfo')
    userInfo.value = data.rows.user
    userIdentityList.value = data.rows.userIdentityList
  } catch (error) {
    console.error('获取用户信息失败：', error)
  }
}


// 组件挂载时获取用户数据
onMounted(() => {
  // 使用示例

  // 取消注释以启用API调用
  fetchUserInfo()
})

const activeTab = 'workspace'

const navTo = (tab) => {
  console.log(222)
  router.push({
    path: "/myView"
  })
}

</script>

<style scoped>
/* 主要内容区域样式 */
.main-content {
  display: flex;
  gap: 20px;
}

/* 用户侧边栏样式 */
.user-sidebar {
  width: 607px;
  height: 398px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px 3px #D6E1FF;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(76.97deg, #F7FAFE 10.15%, #D6E1FF 137.46%);

}

.user-header {
  display: flex;
  margin-bottom: 20px;
}

.avatar-container {
  min-width: 80px;
  height: 80px;
  margin-right: 20px;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #C9D8FF;
}

.greeting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.greeting h2 {
  font-size: 24px;

}

.action-buttons {
  display: flex;
  gap: 15px;
}

.btn {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.primary-btn {
  color: white;
  background: linear-gradient(75.4deg, #46A6FF -9.08%, #1480FF 101.98%);
}

.secondary-btn {
  background: linear-gradient(75.4deg, #0AD089 -9.08%, #00B2CA 101.98%);
  color: white;
}

.user-info-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  width: 100%;
}

.info-item {
  flex: 1;
  font-size: 14px;
  display: flex;
}

.label {
  color: #666;
  white-space: nowrap;
}

.value {
  color: #18467D;
}

.role-buttons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.role-btn {
  padding: 0 25px;
  height: 38px;
  font-size: 14px;
}

/* 内容区域样式 */
.content-area {
  height: 398px;
  flex: 1;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px 3px #D6E1FF;
  padding: 20px;
}

.todo-section {
  width: 100%;
}

.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.task-grid {
  display: flex;
  gap: 20px;
  overflow: auto;
  padding-bottom: 7px;
}

::-webkit-scrollbar {
  width: 2px;
  cursor: pointer;
  border-radius: 10px;
  height: 7px;
  background-color: white !important;
}

::-webkit-scrollbar-thumb {
  width: 2px;
  border-radius: 10px;
  cursor: pointer;
  background-color: #C8C8C8;
}

.task-card {
  background-color: #F1F5FE;
  border-radius: 10px;
  min-width: 285px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column
}

.task-image {
  padding: 15px;
  padding-bottom: 0px;
  height: 130px;
}

.task-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
}

.task-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.full-width {
  width: 100%;
}

.task-title {
  font-size: 16px;
  color: #1677ff;
  margin-bottom: 8px;
}

.task-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.task-btn {
  width: 100px;
  margin: 15px;
}

.approval-btn {
  background-color: #1677ff;
}

.approval-card {
}

.approval-info {
  margin-top: auto;
  margin-bottom: 40px;
}

.info-group {
  line-height: 25px;

}

.info-item {
  font-size: 14px;
  color: #666;
}

.info-item span {
  color: #18467D;
}

/* 常用应用样式 */
.common-apps {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px 3px #D6E1FF;
}

.common-apps h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #2B67B0;
  padding: 0 20px;
}

.apps-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.app-item {
  text-align: center;
  width: 100px;
  h6{
    color: #3963A6;
    font-weight: 500;
  }
}

.app-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
}

.app-name {
  font-size: 14px;
}
</style>
